<template>
  <Dialog
width="1200px" v-model="dialogVisible" :close-on-click-modal="false"
          title="选择关联CDK">
    <!-- 搜索工作栏 -->
    <ContentWrap >
      <div class="cdk-chooser-search-form" >
        <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams"  />
      </div>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <Table
        :columns="allSchemas.tableColumns"
        :data="tableObject.tableList"
        :loading="tableObject.loading"
        :pagination="{
        total: tableObject.total
      }"
        v-model:pageSize="tableObject.pageSize"
        v-model:currentPage="tableObject.currentPage"
      >
        <template #source="{row}">
          {{EnumSourceTypeText[row.source] || "--"}}
        </template>
        <template #denominationFixed="{row}">
          {{row.denominationFixed / 100 || 0}}
        </template>
        <template #denominationMin="{row}">
          {{row.denominationMin / 100 || 0}}
        </template>
        <template #denominationMax="{row}">
          {{row.denominationMax / 100 || 0}}
        </template>
        <template #action="{ row }">
          <el-button
            link
            type="primary"
            @click="chooseItem(row)"
          >
            选择
          </el-button>
        </template>
      </Table>
    </ContentWrap>
  </Dialog>
</template>
<script setup lang="ts" name="CardkeyProductChooser">
import {allSchemas, EnumSourceTypeText} from './../cardkeyProduct.data'
import * as CardkeyProductApi from '@/api/digital/cardkeyproduct'

const emit = defineEmits(['choose'])
const dialogVisible = ref(false) // 弹窗的是否展示
// tableObject：表格的属性对象，可获得分页大小、条数等属性
// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
// 详细可见：https://doc.iocoder.cn/vue3/crud-schema/
const {tableObject, tableMethods} = useTable({
  getListApi: CardkeyProductApi.getCardkeyProductPage, // 分页接口
})
// 获得表格的各种操作
const {getList, setSearchParams} = tableMethods

const chooseItem = (item) => {
  emit("choose", item);
}

/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  getList();
}

const close = async ()=> {
  dialogVisible.value = false;
}

defineExpose({ open, close })
</script>

<style lang="scss" >
.cdk-chooser-search-form {
  .el-input {
    width: 200px;
  }
}
</style>
